<script setup>
import { watch } from 'vue'

const props = defineProps(['pageSetting'])
const ys = {
  '夕阳': 'https://pic3.zhimg.com/80/v2-ef6a2cd08ff89e8f6b0e7c7f6d9affe2_720w.webp',
  '花海': "https://pic1.zhimg.com/80/v2-6d1826254264b010bdbdce9cf28935a0_720w.webp",
  '暗夜': 'https://bit-1310383539.cos.ap-chengdu.myqcloud.com/note-imgs/1666594529103-6.jpg',
  '波涛': 'https://bit-1310383539.cos.ap-chengdu.myqcloud.com/note-imgs/1666594529103-1.jpg',
  '白云': 'https://pic1.zhimg.com/v2-8a4275beeee5d3798a647db30b96e9d8_r.jpg',
}

const bgRadio = ref(
  (() => {
    for (const k in ys) if (props.pageSetting.backgroundImage == ys[k]) return k
    return "自定义"
  })()
)

// 点击除自定义的按钮
const handBg = k => {
  bgRadio.value = k
  props.pageSetting.backgroundImage = ys[k]
}
// 点击自定义
const diyBg = () => {
  props.pageSetting.backgroundImage = props.pageSetting.diyBackgroundImage
}
// 当自定义时，输入框的值复制到diy
watch(() => props.pageSetting.backgroundImage, n => {
  if (bgRadio.value == '自定义') props.pageSetting.diyBackgroundImage = n
})

</script>

<template>
  <el-form @submit.prevent label-position="right" label-width="120px">
    <el-form-item label="背景图片">

      <el-radio-group size="small" v-model="bgRadio" style="width:100%">
        <el-radio-button :label="'自定义'" @click="diyBg" />
        <el-radio-button v-for="(v, k) of ys" :key="k" :label="k" @click="handBg(k)" />
      </el-radio-group>

      <el-input v-if="bgRadio == '自定义'" v-model="props.pageSetting.backgroundImage" clearable style="margin-bottom: 5px;"
        placeholder="图片链接" />

      <div style="min-width: 275px;" v-show="props.pageSetting.backgroundImage">
        <div class="bg-img sj"><img :src="props.pageSetting.backgroundImage" alt="手机端" /></div>
        <div class="bg-img dn"><img :src="props.pageSetting.backgroundImage" alt="电脑端" /></div>
      </div>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="less">
.bg-img {
  display: inline-block;
  border: 1px solid var(--model-border-color);
  border-radius: 5px;
  overflow: hidden;
  margin-right: 5px;

  img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

.dn {
  height: 108px;
  width: 192px;
}

.sj {
  height: 108px;
  width: 61px;
}

::v-deep(.el-form-item__content) {
  align-items: flex-start;
}
</style>